<template>
  <div class="cart-wrap">
      <header>
        <div>
           <van-icon name="arrow-left"
            size="25"
            @click="hardClickpick" />
            <span>购物车</span>
            <van-icon name="more-o" size="25" />
        </div>
        <div>
          <div>
            <img src="https://static.epetbar.com/mpet/images/grouptips.png" alt="">
            <span>已满足399.00元，立享超值低价换购福利>></span>
          </div>
          <div>
            <span>
              立即参与
            </span>
          </div>

        </div>
        
      </header>
      <div class="ecartlist">
        <div>
          <van-checkbox v-model="checked" checked-color="#01c948">E宠西部中央仓</van-checkbox>
          <div class="quest">?</div>
        </div>
        <div>
          <div v-for="i in 5" :key="i.id">
            <div>
            <van-checkbox  v-model="checked" checked-color="#01c948"></van-checkbox>
            </div>
            <div>
            <van-card
              price="2.00"
              desc="描述信息"
              title="商品标题"
              thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">
                <template #num>
                  <van-button size="small">-</van-button>
                  <van-button size="small">{{num}}</van-button>    
                  <van-button size="small">+</van-button>
                </template>
            </van-card>
            </div>
            

          </div>

        </div>

      </div>

      <footer>
        <van-submit-bar :price="3050" button-text="去结算" @submit="onSubmit"
        button-color="#01c948"
        >
       <van-checkbox v-model="checked" checked-color="#01c948">全选</van-checkbox>

    </van-submit-bar>
      </footer>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon);
import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import { SubmitBar } from 'vant';

Vue.use(SubmitBar);
import { Card } from 'vant';

Vue.use(Card);
import { Button } from 'vant';

Vue.use(Button);
export default {
  data(){
    return{
      checked:'',
      num:1
    }
  },
  methods:{
    hardClickpick(){
      this.$router.push('/home/pick')
    },
    onSubmit(){

    }
  }

}
</script>

<style lang="stylus" scoped>
.cart-wrap
  height 100%
  header
    background-color #fff
    >div:first-child 
      height .5rem
      display flex
      justify-content space-between
      align-items center
      padding 0 .1rem 0 .1rem
      >span
        font-size .18rem
        text-align center
        line-height .5rem
    >div:last-child
      height .37rem
      background-color #FCF1B0
      display flex
      justify-content space-between
      align-items center
      font-size .12rem
      color #ff5757
      padding .1rem
      line-height .37rem
      >div:first-child
        padding .05rem
      >div:last-child
        >span
          border 1px solid #ff5757
          padding .03rem
          border-radius .3rem
  .ecartlist 
    height 100% 
    >div:first-child
      height .5rem
      background-color #fff
      line-height .5rem
      display flex
      align-items center    
      padding-left .1rem
      >.quest
        background #ffebcf
        color #feb540
        border-radius 50%
        width 15px
        height 15px
        line-height 15px
        display inline-block
        font-size 12px
        margin-left 15px
        vertical-align middle
        text-align center
        font-weight bold
    >div:last-child
      height 4.6rem
      background-color #fff
      overflow auto
      >div
        height 1.3rem
        display flex
        
        >div:first-child
          width .3rem
          margin-left .1rem
          padding-top .39rem
          padding-buttom .15rem
        >div:last-child
           flex 1 
        .van-card__price
          color #ff5757 
          font-size .16rem
          font-weight 700
        .van-card,.van-card__thumb
          background-color #fff 


      
      
</style>